<template>
	<view class="live-page">
		<uni-nav-bar left-icon="left" @clickLeft="back" background-color="#f5f5f5" statusBar fixed :border="false">
			<div class="nav-title">直播</div>
		</uni-nav-bar>
		<view class="searchbox" @click="togoodslist()">
			<view class="search">
				<view class="scan">
					<image src="../../static/ss1.png"></image>
				</view>
				<view class="inputbox">
					<input placeholder="搜索" />
				</view>
				<view class="searchbut">搜索</view>
			</view>
		</view>
		<view class="content">
			<view class="hot-live">
				<view class="hot-live-title">
					<text>直播精选</text>
					<text class="label">热门精选</text>
				</view>
				<view class="hot-live-list">
					<view class="hot-live-item" v-for="item in 8">
						<view class="image">
							<image src="/static/logo.png" />
						</view>
						<text class="label">Adidas 阿迪官方旗舰店</text>
					</view>
				</view>
			</view>
		</view>
		<view style="position: relative;width: 100%;min-height: 70rpx;">
			<view class="live-cate">
				<view class="live-cate-item" :class="{ 'live-cate-item-select': item == select }" v-for="item in 4">
					<text>热门</text>
				</view>
				<view class="live-cate-item" @click="showMore">
					<text>全部</text>
					<uni-icons class="ml-10" type="more" size="14" />
				</view>
			</view>
			<view class="more-container live-cate" v-if="visible">
				<view class="live-cate-item" :class="{ 'live-cate-item-select': item == select }" v-for="item in 6">
					<text>热门</text>
				</view>
			</view>
		</view>
		<view class="live-list">
			<liveItem v-for="(item,index) in 4" :key="`live-${index}`"></liveItem>
		</view>
	</view>
</template>

<script>
import liveItem from './live-item.vue'
export default {
	components:{liveItem},
	data() {
		return {
			select:0,
			visible:false
		}
	},
	methods: {
		showMore() {
			this.visible = !this.visible
		},
		back(){
			uni.navigateBack({ delta: 1 })
		}
	}
}
</script>

<style lang="scss">
.live-page {
	background-color: #f5f5f5;
	min-height: 100vh;

	.nav-title {
		font-size: 36rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		margin: 0 auto;
		background: url('/static/nav-t-bg.png') no-repeat;
		background-size: 130%;
		background-position-y: 30rpx;
	}

	.searchbox {
		width: 100%;
		height: 134rpx;
		display: flex;
		align-items: center;
		background-color: white;
		border-radius: 0 0 20rpx 20rpx;
		justify-content: space-between;

		.search {
			width: 690rpx;
			height: 40rpx;
			padding: 15rpx 0;
			background: #FFFFFF;
			border-radius: 36rpx;
			border: 2rpx solid #F94D29;
			display: flex;
			align-items: center;
			margin: 0 auto;

			.scan {
				width: 76rpx;
				text-align: center;
				// border-right: solid 2rpx #F2F2F2;

				image {
					width: 32rpx;
					height: 28rpx;
				}
			}

			.inputbox {
				width: 448rpx;
				height: 40rpx;
				padding: 0 24rpx;

				>input {
					width: 100%;
				}
			}

			.searchbut {
				width: 132rpx;
				line-height: 66rpx;
				height: 66rpx;
				background: linear-gradient(180deg, #F94D29 0%, #F99529 100%);
				border-radius: 36rpx;
				font-size: 28rpx;
				font-family: Source Han Sans CN-Medium, Source Han Sans CN;
				font-weight: 500;
				color: #F7F7F7;
				text-align: center;
			}
		}
	}

	.hot-live {
		width: 100%;
		background: linear-gradient(180deg, #FFECE8 0%, #FFFFFF 51%, #FFFFFF 100%);
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		opacity: 1;

		.hot-live-title {
			padding: 22rpx;
			font-size: 36rpx;
			font-family: SourceHanSansCN-Medium-, SourceHanSansCN-Medium;
			font-weight: normal;
			color: #222222;
			line-height: 36rpx;
			display: flex;
			align-items: center;
		}

		.hot-live-title text:nth-child(2) {
			background: linear-gradient(90deg, #F94D29 0%, #F99529 100%);
			border-radius: 20rpx 20rpx 20rpx 0rpx;
			color: white;
			font-size: 24rpx;
			padding: 6rpx 12rpx;
			margin-left: 20rpx;
		}

		.hot-live-list {
			display: flex;
			flex-wrap: nowrap;
			gap: 40rpx;
			padding: 24rpx;
			padding-top: 0;
			overflow-x: scroll;

		}

		.hot-live-item {
			width: 150rpx;
			position: relative;

			.image {
				height: 150rpx;
				width: 150rpx;
				overflow: hidden;
				border: 3rpx solid #F94D29;
				padding: 6rpx;
				border-radius: 100rpx;

				image {
					width: 100%;
					height: 100%;
					border-radius: 100rpx;
				}
			}

			.label {
				background: linear-gradient(90deg, #F94D29 0%, #F99529 100%);
				border-radius: 10rpx;
				left: 0;
				color: white;
				font-size: 24rpx;
				padding: 6rpx 12rpx;
				width: 100%;
				overflow: hidden;
				/*line-height: 15px;*/
				text-overflow: ellipsis;
				display: -webkit-box;
				/*重新定义-webkit私有盒模型*/
				-webkit-box-orient: vertical;
				/*内容之间的排列顺序，vertical垂直方向排列*/
				-webkit-line-clamp: 1;
				/*在第几行末尾显示省略号...*/
				word-break: break-all;
				position: absolute;
				bottom: 0;
				box-sizing: border-box;

			}
		}
	}

	.live-cate {
		padding: 0 24rpx;
		box-sizing: border-box;
		display: grid;
		align-items: center;
		flex-wrap: wrap;
		grid-template-columns: repeat(5,calc(20% - 12rpx));
		gap: 24rpx;
		row-gap: 40rpx;
	}

	.live-cate-item {
		position: relative;
		justify-content: space-around;
	}

	.live-cate-item-select text {
		z-index: 9;
		position: relative;
	}


	.live-cate-item-select text::after {
		content: '';
		position: absolute;
		width: 6rpx;
		height: 6rpx;
		background-color: #F94D29;
		border-radius: 100px;
		bottom: -6rpx;
		left: -3rpx;
	}


	.live-cate-item-select::after {
		content: '';
		position: absolute;
		width: 27rpx;
		height: 15rpx;
		background: #FFA38F;
		opacity: 0.81;
		filter: blur(2px);
		left: 0rpx;
		top: 50%;
		z-index: 0;
	}

	.live-cate-item-select::before {
		content: '';
		position: absolute;
		width: 50rpx;
		height: 40rpx;
		border: 5rpx solid #F94D29;
		border-radius: 140px / 100px;
		border-top: 5rpx solid transparent;
		border-left: 5rpx solid transparent;
		border-right: 5rpx solid transparent;
		bottom: -12rpx;
		left: 3rpx;
	}

	.more-container {
		box-sizing: border-box;
		position: absolute;
		width: 100vw;
		left: 0;
		padding: 24rpx;
		background-color: white;
		top: 64rpx;
		z-index: 9;
	}

	.content {
		padding: 24rpx;
	}

	.live-list{
		display: grid;
		grid-template-columns: repeat(2,calc(50% - 12rpx));
		gap: 24rpx;
		row-gap: 40rpx;
		padding: 24rpx;
	}
}
</style>
